/*
Please see the included license!
Also, don't forget to follow me on Twitter! @joshuasortino

Notes: The buttons will look much better if you bring your own @font-face font. I used http://www.fontsquirrel.com/fonts/Anivers

Skip to line 54 for the button markup!
*/
body {
    /*background-image: url("http://joshuasortino.com/projects/css3-colored-buttons/images/background.png"), -webkit-gradient(linear, right top, left top, color-stop(0.5, rgb(48, 48, 48)), color-stop(0.5, rgb(240, 240, 240)));*/
    background: url("../images/about.jpg")  center center fixed;
    font-family: anivers, helvetica, Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
}

.dark-header {
    font-size: 32px;
    color: #303030;
    text-shadow: rgba(255, 255, 255, 0.85) 1px 1px 0px;
    line-height: 1em;
    font-weight: 700;
    margin-bottom: 20px;
}

.light-header {
    font-size: 32px;
    color: #f0f0f0;
    text-shadow: rgba(0, 0, 0, 0.85) 1px 1px 0px;
    line-height: 1em;
    font-weight: 700;
    margin-bottom: 20px;
}

.left {
    float: left;
}

.right {
    float: right;
}

.light-buttons {
    width: 40%;
    padding-right: 10%;
    float: left;
}

.dark-buttons {
    width: 40%;
    padding-left: 10%;
    float: left;
}

/*****Buttons*****/
.button {
    width: 9.5em;
    display: block;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ie-border-radius: 6px;
    border-radius: 6px;
    padding: .48em .8em;
    text-shadow: rgba(0, 0, 0, .5) 0px -1px 0px;
    font-size: 18px;
    font-weight: 700;
    -webkit-transition-property: background-color;
    -webkit-transition-duration: .15s;
    -webkit-transition-timing-function: ease-in-out;
    cursor: pointer;
    text-decoration: none;
    margin-bottom: 20px;
}

.button:active {
    margin-top: 25px;
    margin-bottom: 15px;
}

.button span {
    vertical-align: middle;
}

.icon {
    width: 26px;
    height: 26px;
    -webkit-border-radius: 13px;
    -moz-border-radius: 13px;
    -ie-border-radius: 13px;
    border-radius: 13px;
    background: rgba(0, 0, 0, .3);
    float: right;
    -webkit-box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, .2) inset, 0px 0px 0px 1px rgba(255, 255, 255, .2);
    -moz-box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, .2) inset, 0px 0px 0px 1px rgba(255, 255, 255, .2);
    -ie-box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, .2) inset, 0px 0px 0px 1px rgba(255, 255, 255, .2);
    box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, .2) inset, 0px 0px 0px 1px rgba(255, 255, 255, .2);
}

.arrow {
    margin: 7px 0px 0 8px;
    -webkit-border-style: solid;
    -moz-border-style: solid;
    -ie-border-style: solid;
    border-style: solid;
    border-width: 6px 6px 6px 12px;
    width: 0;
    height: 0;
}

/********Light Background Colors********/
/*Blue*/
.lightbg-blue {
    background-color: #64a8a6;
    color: #dafffe;
    -webkit-box-shadow: 0px 0px 0px 1px #4e8381 inset, 0px 0px 0px 2px #74b6b4 inset, 0px 4px 0px 0px #4a7c7b, 0px 5px 0px 0px #355655, 0px 8px 0px 0px rgba(0, 0, 0, .15);
    -moz-box-shadow: 0px 0px 0px 1px #4e8381 inset, 0px 0px 0px 2px #74b6b4 inset, 0px 4px 0px 0px #4a7c7b, 0px 5px 0px 0px #355655, 0px 8px 0px 0px rgba(0, 0, 0, .15);
    -ie-box-shadow: 0px 0px 0px 1px #4e8381 inset, 0px 0px 0px 2px #74b6b4 inset, 0px 4px 0px 0px #4a7c7b, 0px 5px 0px 0px #355655, 0px 8px 0px 0px rgba(0, 0, 0, .15);
    box-shadow: 0px 0px 0px 1px #4e8381 inset, 0px 0px 0px 2px #74b6b4 inset, 0px 4px 0px 0px #4a7c7b, 0px 5px 0px 0px #355655, 0px 8px 0px 0px rgba(0, 0, 0, .15);
}

.lightbg-blue:hover {
    background-color: #73c2c0;
}

.lightbg-blue:active {
    background-color: #5a9896;
    -webkit-box-shadow: 0px 0px 0px 1px #589391 inset, 0px 0px 0px 2px #65a9a7 inset, 0px 1px 0px 0px #355655, 0px 3px 0px 0px rgba(0, 0, 0, .15);
    -moz-box-shadow: 0px 0px 0px 1px #589391 inset, 0px 0px 0px 2px #65a9a7 inset, 0px 1px 0px 0px #355655, 0px 3px 0px 0px rgba(0, 0, 0, .15);
    -ie-box-shadow: 0px 0px 0px 1px #589391 inset, 0px 0px 0px 2px #65a9a7 inset, 0px 1px 0px 0px #355655, 0px 3px 0px 0px rgba(0, 0, 0, .15);
    box-shadow: 0px 0px 0px 1px #589391 inset, 0px 0px 0px 2px #65a9a7 inset, 0px 1px 0px 0px #355655, 0px 3px 0px 0px rgba(0, 0, 0, .15);
}

.lightbg-blue .arrow {
    border-color: transparent transparent transparent #74b6b4;
}

/*Pink*/
.lightbg-pink {
    background-color: #cc3747;
    color: #ffdada;
    -webkit-box-shadow: 0px 0px 0px 1px #8d1b27 inset, 0px 0px 0px 2px #dd4356 inset, 0px 4px 0px 0px #8d1b27, 0px 5px 0px 0px #65141c, 0px 8px 0px 0px rgba(0, 0, 0, .15);
    -moz-box-shadow: 0px 0px 0px 1px #8d1b27 inset, 0px 0px 0px 2px #dd4356 inset, 0px 4px 0px 0px #8d1b27, 0px 5px 0px 0px #65141c, 0px 8px 0px 0px rgba(0, 0, 0, .15);
    -ie-box-shadow: 0px 0px 0px 1px #8d1b27 inset, 0px 0px 0px 2px #dd4356 inset, 0px 4px 0px 0px #8d1b27, 0px 5px 0px 0px #65141c, 0px 8px 0px 0px rgba(0, 0, 0, .15);
    box-shadow: 0px 0px 0px 1px #8d1b27 inset, 0px 0px 0px 2px #dd4356 inset, 0px 4px 0px 0px #8d1b27, 0px 5px 0px 0px #65141c, 0px 8px 0px 0px rgba(0, 0, 0, .15);
}

.lightbg-pink:hover {
    background-color: #dd3c4d;
}

.lightbg-pink:active {
    background-color: #bb3241;
    -webkit-box-shadow: 0px 0px 0px 1px #8d1b27 inset, 0px 0px 0px 2px #dd4356 inset, 0px 1px 0px 0px #8d1b27, 0px 3px 0px 0px rgba(0, 0, 0, .15);
    -moz-box-shadow: 0px 0px 0px 1px #8d1b27 inset, 0px 0px 0px 2px #dd4356 inset, 0px 1px 0px 0px #8d1b27, 0px 3px 0px 0px rgba(0, 0, 0, .15);
    -ie-box-shadow: 0px 0px 0px 1px #8d1b27 inset, 0px 0px 0px 2px #dd4356 inset, 0px 1px 0px 0px #8d1b27, 0px 3px 0px 0px rgba(0, 0, 0, .15);
    box-shadow: 0px 0px 0px 1px #8d1b27 inset, 0px 0px 0px 2px #dd4356 inset, 0px 1px 0px 0px #8d1b27, 0px 3px 0px 0px rgba(0, 0, 0, .15);
}

.lightbg-pink .arrow {
    border-color: transparent transparent transparent #dd4356;
}

/*Orange*/
.lightbg-orange {
    background-color: #e65440;
    color: #ffdada;
    -webkit-box-shadow: 0px 0px 0px 1px #b24132 inset, 0px 0px 0px 2px #ea624a inset, 0px 4px 0px 0px #a53c2e, 0px 5px 0px 0px #7e2e23, 0px 8px 0px 0px rgba(0, 0, 0, .15);
    -moz-box-shadow: 0px 0px 0px 1px #b24132 inset, 0px 0px 0px 2px #ea624a inset, 0px 4px 0px 0px #a53c2e, 0px 5px 0px 0px #7e2e23, 0px 8px 0px 0px rgba(0, 0, 0, .15);
    -ie-box-shadow: 0px 0px 0px 1px #b24132 inset, 0px 0px 0px 2px #ea624a inset, 0px 4px 0px 0px #a53c2e, 0px 5px 0px 0px #7e2e23, 0px 8px 0px 0px rgba(0, 0, 0, .15);
    box-shadow: 0px 0px 0px 1px #b24132 inset, 0px 0px 0px 2px #ea624a inset, 0px 4px 0px 0px #a53c2e, 0px 5px 0px 0px #7e2e23, 0px 8px 0px 0px rgba(0, 0, 0, .15);
}

.lightbg-orange:hover {
    background-color: #f15843;
}

.lightbg-orange:active {
    background-color: #d54e3b;
    -webkit-box-shadow: 0px 0px 0px 1px #b24132 inset, 0px 0px 0px 2px #ea624a inset, 0px 1px 0px 0px #a53c2e, 0px 3px 0px 0px rgba(0, 0, 0, .15);
    -moz-box-shadow: 0px 0px 0px 1px #b24132 inset, 0px 0px 0px 2px #ea624a inset, 0px 1px 0px 0px #a53c2e, 0px 3px 0px 0px rgba(0, 0, 0, .15);
    -ie-box-shadow: 0px 0px 0px 1px #b24132 inset, 0px 0px 0px 2px #ea624a inset, 0px 1px 0px 0px #a53c2e, 0px 3px 0px 0px rgba(0, 0, 0, .15);
    box-shadow: 0px 0px 0px 1px #b24132 inset, 0px 0px 0px 2px #ea624a inset, 0px 1px 0px 0px #a53c2e, 0px 3px 0px 0px rgba(0, 0, 0, .15);
}

.lightbg-orange .arrow {
    border-color: transparent transparent transparent #ea624a;
}

/*Green*/
.lightbg-green {
    background-color: #78896d;
    color: #e2f1d8;
    -webkit-box-shadow: 0px 0px 0px 1px #63715a inset, 0px 0px 0px 2px #87977a inset, 0px 4px 0px 0px #63715a, 0px 5px 0px 0px #535e4b, 0px 8px 0px 0px rgba(0, 0, 0, .15);
    -moz-box-shadow: 0px 0px 0px 1px #63715a inset, 0px 0px 0px 2px #87977a inset, 0px 4px 0px 0px #63715a, 0px 5px 0px 0px #535e4b, 0px 8px 0px 0px rgba(0, 0, 0, .15);
    -ie-box-shadow: 0px 0px 0px 1px #63715a inset, 0px 0px 0px 2px #87977a inset, 0px 4px 0px 0px #63715a, 0px 5px 0px 0px #535e4b, 0px 8px 0px 0px rgba(0, 0, 0, .15);
    box-shadow: 0px 0px 0px 1px #63715a inset, 0px 0px 0px 2px #87977a inset, 0px 4px 0px 0px #63715a, 0px 5px 0px 0px #535e4b, 0px 8px 0px 0px rgba(0, 0, 0, .15);
}

.lightbg-green:hover {
    background-color: #8b9f7f;
}

.lightbg-green:active {
    background-color: #68775f;
    -webkit-box-shadow: 0px 0px 0px 1px #63715a inset, 0px 0px 0px 2px #87977a inset, 0px 1px 0px 0px #63715a, 0px 3px 0px 0px rgba(0, 0, 0, .15);
    -moz-box-shadow: 0px 0px 0px 1px #63715a inset, 0px 0px 0px 2px #87977a inset, 0px 1px 0px 0px #63715a, 0px 3px 0px 0px rgba(0, 0, 0, .15);
    -ie-box-shadow: 0px 0px 0px 1px #63715a inset, 0px 0px 0px 2px #87977a inset, 0px 1px 0px 0px #63715a, 0px 3px 0px 0px rgba(0, 0, 0, .15);
    box-shadow: 0px 0px 0px 1px #63715a inset, 0px 0px 0px 2px #87977a inset, 0px 1px 0px 0px #63715a, 0px 3px 0px 0px rgba(0, 0, 0, .15);
}

.lightbg-green .arrow {
    border-color: transparent transparent transparent #87977a;
}

